<template>
  <div class="axiom-error-page">
    <axiom-section align="center">
      <axiom-title level="1" :title="String(code)"></axiom-title>
      <axiom-title level="3" :title="title"></axiom-title>
      <axiom-text type="secondary">{{ description }}</axiom-text>
      <slot name="actions">
        <axiom-group gap="large">
          <axiom-button type="primary" @click="$emit('retry')" v-if="showRetry">重试</axiom-button>
          <axiom-button @click="$emit('back')" v-if="showBack">返回</axiom-button>
          <axiom-button @click="$emit('home')" v-if="showHome">回到首页</axiom-button>
        </axiom-group>
      </slot>
    </axiom-section>
  </div>
</template>

<script>
import AxiomSection from './AxiomSection.vue';
import AxiomTitle from './AxiomTitle.vue';
import AxiomText from './AxiomText.vue';
import AxiomGroup from './AxiomGroup.vue';
import AxiomButton from './AxiomButton.vue';

export default {
  name: 'AxiomErrorPage',
  components: {
    AxiomSection,
    AxiomTitle,
    AxiomText,
    AxiomGroup,
    AxiomButton,
  },
  props: {
    code: { type: [String, Number], default: '404' },
    title: { type: String, default: '页面不存在' },
    description: { type: String, default: '抱歉，您访问的页面不存在或已被删除' },
    showRetry: { type: Boolean, default: false },
    showBack: { type: Boolean, default: true },
    showHome: { type: Boolean, default: true }
  }
}
</script>